<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/website/common/base.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>巨达收银台</title>
    <%@ include file="/website/common/common.jsp" %>
    <link href="${webctx }/css/payment.css" rel="stylesheet" type="text/css"/>
    <style>
        .logo1{
            width: 200px;
            float: left;
        }
        .headlogo{
            /*margin-top: 34px;*/
        }
        .logo1 img{
            max-height: 56px;
            border: none;
            position: relative;
            top: 30px;
        }

        #xuxian {
            width: 100%;
            height: 0;
            border-bottom: #DCDCDC 1px dashed;
        }

        .title-w {
            width: 800px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }

        .p-title {
            width: 190px;
            float: left;
            margin-top: 42px;
            font-size: 28px;
        }

        .p-title2 {
            font-size: 18px;
            padding-left: 46px;
            padding-top: 35px;
        }

        .jine {
            /*width: 300px;*/
            padding: 20px 0 15px 20px;
            font-size: 18px;
            text-align: right;
            float: right;
        }

        .jine i {
            margin: 0 5px;
            font-style: normal;
            color: red;
        }

        .tishi {
            padding: 0px 0 15px 20px;
            width: 800px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #999;
        }

        .img {
            margin-top: 38px;
            float: left;
            margin-right: 32px;
        }

        #test {
            width: 100%;
            height: 100%;
            background-color: #000;
            position: fixed;
            top: 0;
            left: 0%;
            z-index: 99;
            opacity: 0.3;
            filter: alpha(opacity=30);
            display: none;
        }

        #test2 {
            width: 565px;
            height: 350px;
            border-radius: 5px;
            background-color: #FFFFFF;
            margin: auto;
            position: fixed;
            z-index: 999;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: none;
        }

        .m-title {
            padding: 50px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }

        .m-tishi {
            padding: 20px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }

        .m-wc {
            border-radius: 5px;
            border: 1px solid #0daeff;
            margin: 10px;
            padding: 5px 26px;
            background-color: #0daeff;
            color: #FFFFFF;
        }

        .m-wc:hover {
            color: #FFFFFF;
        }

        .m-qita {
            border-radius: 5px;
            border: 1px solid #0daeff;
            margin: 10px;
            padding: 5px;
        }

        .m-btn {
            padding: 37px;
            text-align: center;
        }

        .m-phone {
            padding: 5px;
            color: #999;
            text-align: center;
        }

        .m-guanbi {
            position: absolute;
            top: 5%;
            left: 94%;
        }
        .payment{
            margin-left: 25px;
        }
    </style>
</head>
<body>
<%@ include file="/website/common/top-pay.jsp" %>
<input type="hidden" class="code" value="${code}">
<div id="wrap-head">
    <div class="head wid990 clearfix">
        <div class="logo1">
            <a href="${ctx }/website/index.jsp"><img src="${webctx }/images/logo.png"/></a>
        </div>
        <img class="img" src="${webctx }/images/pay/shuxian.png"/>
        <p class="p-title">巨达收银台</p>
    </div>
</div>
<div id="Warp_pay">
    <div class="wid990">
        <div class="title title-w">请您及时付款，以便为您及时处理订单。订单编号：${code}</div>
        <div class="jine">支付金额:<i>${pay_money}</i>元</div>
        <div class="tishi">请您在提交订单后24小时内完成支付，否则订单会自动取消</div>
        <div class="orderList">
            <div class="order-container pay-method">
                <p class="p-title2">在线支付方式</p>
                <div class="order-inner selectPayType cur">
                    <ul class="clearfix payment" id="J_RadioCur">
                        <%-- <li class="cur">
                             <div class="cart-checkbox">
                                 <label for="Alipay">
                                     <a href="javascript:;"><input value="3" type="radio" checked="checked"  name="payOnline" id="Alipay"></a>
                                     <span class="chk-ico"></span>
                                     <span class="pay-img"><img src="${webctx }/images/pay/Alipay.jpg"  /></span>
                                 </label>

                             </div>
                         </li>--%>
                        <li class="">
                            <div class="cart-checkbox">
                                <label for="WeChat">
                                    <input value="1" type="radio" name="paytype" id="WeChat">
                                    <%--<span class="chk-ico"></span>--%>
                                    <span class="pay-img"><img src="${webctx }/images/pay/WeChat.jpg"/></span>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="orderList selectPayType" style="border: none;">
                    <div class="order-container pay-method">
                        <div id="xuxian"></div>
                        <p class="p-title2">其它支付方式</p>
                        <div class="order-inner">
                            <ul class="clearfix payment">
                                <li class="">
                                    <div class="cart-checkbox">
                                        <label for="hd">
                                            <input value="2" type="radio" name="paytype" id="hd">
                                            <%--<span class="chk-ico"></span>--%>
                                            <span class="pay-img"><img src="${webctx }/images/pay/hd.png"/></span>
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="test"></div>
<div id="test2">
    <div class="m-title">第三方支付</div>
    <p class="m-countdown" style="display:none; font-size: 18px; text-align:center; "><em class="countdown" style="color: #ff6767;">3</em>秒后自动跳转
    </p>
    <div class="m-guanbi">
        <a href="javascript:void(0);" onclick="closeDialog();">
            <img src="${webctx}/images/pay/guanbi.png"/>
        </a>
    </div>
    <div>
        <p class="m-tishi">
            请您在新打开的页面中进行支付，支付完成前请不要关闭本窗口
        </p>
    </div>
    <div class="m-btn">
        <a href="javascript:window.location.href='${ctx}/order/orderlist'" class="m-wc">已完成支付</a>
        <a href="javascript:void(0);" onclick="closeDialog();" class="m-qita">选择其它方式支付</a>
    </div>
    <div>
        <p class="m-phone">
            客服电话：400-805-5522 （8:30-19:00）
        </p>
    </div>
</div>
<%@ include file="/website/common/foot-site.jsp" %>
<script>
    /*var i;
    $("#WeChat").click(function () {
        $("#test,#test2").show();
        $(".countdown").text(3);
        $(".m-countdown").show();
        i = setInterval(lazyGo, 1000);
    });

    function lazyGo() {
        var sec = $(".countdown").text();
        $(".countdown").text(--sec);     //text()设置或返回被选元素的文本内容。
        if (sec <= 0) {
            $(".m-countdown").hide();
            clearInterval(i);
           $(".pay").trigger("click");
        }
    }*/

    $("#WeChat").click(function () {
        window.location.href = "${ctx}/payment/" + $(".code").val();
    });

    $("#hd").click(function () {
        window.location.href = "${ctx}/payment/delivery/" + $(".code").val();
    })

    function closeDialog() {
        $("#test2,#test").hide();
    }

    $(".selectPayType").click(function () {
        $(".selectPayType").removeClass("cur");
        $(this).addClass("cur");
    })

</script>
</body>
</html>
